<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Images</title>
    <style>
        /* 新增图片容器样式 */
        #images-container {
            display: flex;
            flex-wrap: wrap;
            gap: 15px; /* 图片间距 */
            margin-top: 20px;
        }

        .image-item {
            width: 200px; /* 固定宽度 */
            height: 200px; /* 固定高度 */
            border: 1px solid #eee;
            border-radius: 4px;
            overflow: hidden; /* 确保图片不超出容器 */
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }

        .image-item:hover {
            transform: scale(1.03);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }

        .image-item img {
            width: 100%; /* 图片宽度填满容器 */
            height: 100%; /* 图片高度填满容器 */
            object-fit: cover; /* 保持比例并填充容器 */
            display: block;
        }
    </style>
</head>
<body>
<h1>Images</h1>

<!-- 文件上传表单保持不变 -->
<form id="imageUploadForm">
    <input type="file" name="file" accept="image/*" required>
    <input type="hidden" name="type" value="image">
    <input type="submit" value="Upload Image">
</form>

<!-- 修改图片容器 -->
<div id="images-container"></div>

<script>
    document.getElementById('imageUploadForm').addEventListener('submit', function(event) {
        event.preventDefault();
        const formData = new FormData(this);
        fetch('/media/upload', {
            method: 'POST',
            body: formData
        })
        .then(response => response.text())
        .then(data => {
            alert(data);
            // 重新获取图片列表
            fetch('/media?type=image')
            .then(response => response.json())
            .then(data => {
                renderImages(data);
            });
        });
    });

    // 初始加载图片列表
    fetch('/media?type=image')
    .then(response => response.json())
    .then(data => {
        renderImages(data);
    });

    // 新增：图片渲染函数
    function renderImages(images) {
        const container = document.getElementById('images-container');
        container.innerHTML = '';

        images.forEach(image => {
            const item = document.createElement('div');
            item.className = 'image-item';

            const img = document.createElement('img');
            img.src = image.url;
            img.alt = 'Uploaded image';

            item.appendChild(img);
            container.appendChild(item);
        });
    }
</script>
</body>
</html>
